<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<link type="text/css" rel="stylesheet" href="dist/css/bootstrap.min.css">
<body>

<div class="container" >
    <div class="row">
        <div class="col-lg-6" >这个是前6分</div>
        <div class="col-lg-6" >这个是后6分</div>
    </div>
    <div class="row">
        <div class="col-lg-6 col-lg-offset-6" style="text-align: right">这个偏移了6分的div</div>

    </div>
    <h1>这是bootstrap的h1的样子<span class="small">这是副标题</span></h1>
    <p class="text-lowercase">Lowercased text.</p>
    <p class="text-uppercase">Uppercased text.</p>
    <p class="text-capitalize">Capitalized text.</p>
    <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>


    <div class="row">
        <table class="table table-hover table-striped">
            <tr class="active">
                <th>第一列表头</th>
                <th>第二列表头</th>
                <th>第三列表头</th>
                <th>第四列表头</th>
                <th>第五列表头</th>
            </tr>
            <tr class="info">
                <td>第一行</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
                <td>第五列</td>
            </tr>
            <tr class="danger">
                <td>第二行</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
                <td>第五列</td>
            </tr>
            <tr class="warning">
                <td>第三行</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
                <td>第五列</td>
            </tr>
            <tr class="success">
                <td>第四行</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
                <td>第五列</td>
            </tr>
            <tr>
                <td>第五行</td>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
                <td>第五列</td>
            </tr>
        </table>
    </div>

    <div class="row col-lg-6 col-lg-offset-3">
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
            </div>
            <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
            </div>
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Check me out
                </label>
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
            <button type="button" class="btn btn-lg btn-primary">Submit</button>
            <button type="button" class="btn btn-md btn-danger">Submit</button>
            <button type="button" class="btn btn-sm btn-warning">Submit</button>
            <button type="button" class="btn btn-md btn-info">Submit</button>
            <button type="button" class="btn btn-lg btn-success">Submit</button>



        </form>
    </div>

    <div class="row col-lg-12">
        <img src="images/1.jpg" alt="..." class="img-rounded">
        <img src="images/3.webp" alt="..." class="img-circle">
        <img src="images/2.jpg" alt="..." class="img-thumbnail">
        
        <h1 class="text-primary">https://v3.bootcss.com/css/#images</h1>
        <h2 class="text-success">https://v3.bootcss.com/css/#images</h2>
        <h3 class="text-info">https://v3.bootcss.com/css/#images</h3>
        <h4 class="text-warning">https://v3.bootcss.com/css/#images</h4>
        <h5 class="text-danger">https://v3.bootcss.com/css/#images</h5>
        <h6 class="text-muted">https://v3.bootcss.com/css/#images</h6>
    </div>

</div>

<script>
    //javascript 的字符串模板
    var a = "zhangsan";
    var str = '<td>${a}</td>';
</script>
</body>
</html>